import * as React from "react"
import { ViewStyle, Text, Animated } from "react-native"

export interface TipProps {
  /**
   * Text which is looked up via i18n.
   */
  tx?: string

  /**
   * The text to display if not using `tx` or nested components.
   */
  text?: string

  /**
   * An optional style override useful for padding & margin.
   */
  style?: ViewStyle

  errorText?: string
}

/**
 * Stateless functional component for your needs
 *
 * Component description here for TypeScript tips.
 */

export class Tip extends React.Component<TipProps, {}> {
  state = {
    fadeAnim: new Animated.Value(0) // Initial value for opacity: 0
  }

  componentDidMount() {
    Animated.sequence([
      Animated.timing(this.state.fadeAnim, { toValue: 1, duration: 1000 }),
      Animated.timing(this.state.fadeAnim, { toValue: 0, duration: 1000 })
    ]).start()
  }

  render() {
    let { fadeAnim } = this.state
    let { errorText } = this.props
    return (
      <Animated.View
        style={{
          ...this.props.style,
          opacity: fadeAnim
        }}
      >
        <Text>{errorText}</Text>
      </Animated.View>
    )
  }
}
